<template>
    <div class="activity"  :style="{minHeight : h}">
        <header-1 class="d1" @router="router">
            <template v-slot:center>
                <span class="center">
                    可报名活动
                </span>
            </template>
            <template v-slot:right>
                <span class="right" @click="d1">
                    报名记录
                </span>
            </template>
        </header-1>
        <div class="d2"></div>
        <div class="box" v-for="(item,index) in arr" :key="item.id">
            <div class="box_top">
                <div class="box_top_1">
                    <span class="box_top_2">NO.{{index+1}}</span>
                    <div class="box_top_3">
                        <span class="box_top_4">{{item.acName}}</span>
                        <span>活动细则：{{item.rulesCh}}</span>
                        <span>用户类型：{{item.userType}}</span>
                        <span v-if="item.acAsk">店铺要求：{{item.acAsk}}</span>
                        <span>使用方式：{{item.useType}}</span>
                        <span>活动日期：{{item.acData}}</span>
                        <span>报名日期：{{item.applicationData}}</span>
                        <span v-if="item.applicationExp">报名费用：₱{{item.applicationExp}}</span>
                    </div>
                </div>
            </div>
            <div class="box_bottom">
                <div @click="detail(item)">活动详情</div>
                <div @click="showPopup(item)">立即报名</div>
            </div>
        </div>
        <div class="foot">-没有更多数据了-</div>
        <pwd class="pwd" v-show="pwdstate" @cancel="cancel" @zf="zf"></pwd>
    </div>
</template>
<script>
import pwd from '../../components/BS/PwdView.vue'
import header1 from '../../components/BS/header2View.vue'
import { Dialog } from 'vant'
import { HuoDon} from '../../https/MaRk'
import { Toast } from 'vant';
export default {
    name: 'OkAvi',
    data() {
        return {
            arr: '',
            pwdstate: false,
            dataList: [],
            h:'',
        }
    },
    components: {
        header1,
        pwd
    },
    created() {
        this.h = window.innerHeight + 'px'
        // 拿到后端数据
            HuoDon().then(res => {
                console.log(res);
                console.log(res.data.data);
                res.data.data.forEach(item =>{
                    if(item.userType == 1){
                        item.userType = '所有用户'
                    }
                    if(item.userType == 2){
                        item.userType = '新注册用户'
                    }
                    if(item.userType == 3){
                        item.userType = '店铺新用户'
                    }
                })
                this.arr = res.data.data
            }).catch(err => {
                console.log(err);
            })
    },
    computed: {

    },
    methods: {
        router(){
            this.$router.push('/tar')
        },
        // 跳转详情
        detail(item) {
            this.$router.push({ path: '/okavi1', query: { name: item } })
        },
        // 是否报名
        showPopup(item) {
            Dialog.confirm({
                width: '250px',
                message: '是否报名次活动?',
            })
                .then(() => {
                    if (item.applicationExp) {
                        this.$router.push({ path: '/okavi2', query: { name: item } });
                    } else {
                        this.pwdstate = true
                    }
                })
                .catch(() => {

                });
        },
        // 取消
        cancel() {
            this.pwdstate = false
        },
        // 报名记录
        d1() {
            this.$router.push('okavi3')
        },
        //支付
        zf(){
            Toast.success('报名成功');
            this.pwdstate = false
        }
        
    }
}
</script>
<style scoped>
.d1 {
    position: fixed;
    top: 0;
    z-index: 1;
}

.d2 {
    height: 50px;
}

.activity {
    background-color: #f5f5f5;
}

.box {
    width: 90%;
    margin: 20px auto;
}

.box_top {
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 15px;
    display: flex;
}

.box_bottom {
    border-radius: 15px;
    width: 100%;
    height: 40px;
    margin-top: 1px;
    background-color: #FFFFFF;
    display: flex;
    font-size: 15px;
    color: #ff6e53;
    justify-content: space-around;
    align-items: center;
}

.box_top_1 {
    display: flex;
    width: 90%;
    height: 100%;
    margin: 10px auto;
}

.box_top_2 {
    font-size: 15px;
    color: #797979;
    margin-top: 6px;
}

.box_top_3 {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #fb8974;
    margin-left: 10px;
}

.box_top_3 span {
    margin: 5px;
}

.box_top_4 {
    font-size: 15px;
    color: #ff6e53;
    margin-bottom: 5px;
}

.foot {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 15px;
    color: #797979;
}

.pwd {
    position: fixed;
    top: 0;
    z-index: 1;
}
</style>